<template>
	<view class="container">
		<view class="content">
			<header-view></header-view>
			<view class="title" v-if="type == 1">修改密码</view>
			<view class="title" v-if="type == 2">修改交易密码</view>
			<view class="form">
				<view class="form_item">
					<view class="form_title">
						原密码
					</view>
					<view class="input_box flex">
						<input type="password" v-model="form.oldPwd" style="flex:1" maxlength="20" />
					</view>
				</view>
				<view class="form_item">
					<view class="form_title">
						新密码
					</view>
					<view class="input_box flex">
						<input type="password" v-model="form.newPwd" style="flex:1" maxlength="20" />
					</view>
				</view>
				<view class="form_item">
					<view class="form_title">
						确认密码
					</view>
					<view class="input_box flex">
						<input type="password" v-model="form.againPwd" style="flex:1" maxlength="20" />
					</view>
				</view>
				<view class="fixed">
					<view class="done btn flex_between" @tap="updataPassword">
						<text>完成</text>
						<uni-icons custom-prefix="iconfont" type="icon-duigou" color="#fff" size="24"></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import headerView from "@/components/headerView.vue"
	import {
		updataPassApi,
		updateSecurityApi
	} from '@/api/api.js'
	export default {
		components: {
			headerView
		},
		data() {
			return {
				type: '',
				delShow: false,
				form: {
					oldPwd: "",
					newPwd: "",
					againPwd: ""
				}
			};
		},
		onLoad(opt) {
			this.type = opt.type
			console.log(this.type)
		},
		methods: {
			updataPassword() {
				// 校验新密码是否与老密码相同
				if (this.form.oldPwd === this.form.newPwd) {
					uni.showToast({
						title: '新密码不能与原密码相同',
						icon: 'none',
						duration: 2000,
					});
					return;
				}

				// 校验密码是否为空
				if (!this.form.oldPwd || !this.form.newPwd || !this.form.againPwd) {
					uni.$u.toast("请确保信息填写完整");
					return;
				}

				// 校验新密码和确认密码是否一致
				if (this.form.newPwd !== this.form.againPwd) {
					uni.$u.toast("新密码和确认密码不一致");
					return;
				}

				// 根据type的值选择调用不同的接口
				if (this.type == 1) {
					// 调用修改密码接口 updataPassApi，传递原密码、新密码和确认密码作为参数
					updataPassApi({
							old_pass: this.form.oldPwd,
							new_pass: this.form.newPwd,
							token: uni.getStorageSync("token")
						})
						.then((res) => {
							uni.showToast({
								title: res.data.msg,
								icon: 'success',
								duration: 2000,
							});
						});
				} else if (this.type == 2) {
					// 调用修改交易密码接口 updateSecurityApi，传递原密码、新密码和确认密码作为参数
					updateSecurityApi({
							old_pass: this.form.oldPwd,
							new_pass: this.form.newPwd,
							token: uni.getStorageSync("token")
						})
						.then((res) => {
							uni.showToast({
								title: res.data.msg,
								icon: 'success',
								duration: 2000,
							});
						});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		height: auto;

		.content {
			padding-bottom: 40rpx;
			// position: relative;
			padding-right: 0;

			.title {
				padding-top: 60rpx;
				font-size: 30px;
				font-weight: 500;
				font-family: PM;
				line-height: 92rpx;
			}

			.form {
				margin-top: 10rpx;

				.form_item {
					padding: 80rpx 40rpx 0 0;

					.form_title {
						font-family: PM;
						opacity: .8;
					}

					.input_box {
						width: 100%;
						margin-top: 20rpx;
						background-color: hsla(0, 0%, 92.9%, .46);
						border-radius: 20rpx;
						font-size: 30rpx;
						padding: 0 40rpx;
						height: 98rpx;
						line-height: 98rpx;
						border: 4rpx solid #3d3d3d;
						font-weight: 600;
						font-family: PM;
					}
				}

				.fixed {
					.btn {
						height: 100rpx;
						line-height: 100rpx;
						color: #fff;
						font-size: 32rpx;
						padding: 0 40rpx;
						border-radius: 20rpx;
						background-image: url("../../../static/img/btn_bg.png");
						background-size: cover;
						background-repeat: no-repeat;
						overflow: hidden;
						// position: absolute;
						// right: 0;
						// left: 0;
						// bottom: 10vh;
					}

					.done {
						background-color: #0065ff;
						margin-left: 40rpx;
						margin-top: 40rpx;
						border-radius: 20rpx 0 0 20rpx;
					}
				}
			}
		}
	}

	.mask {
		width: 100%;
		height: auto;
		background: #fff;
		border-radius: 40rpx 40rpx 0 0;
		padding: 40rpx;

		.back {
			width: 72rpx;
			height: 72rpx;
			background-color: hsla(0, 0%, 92.9%, .46);
			border-radius: 20rpx;
		}

		.title {
			font-size: 50rpx;
			margin: 40rpx 0;
		}

		.list {
			.item {
				margin: 20rpx 0;
				align-items: flex-start;

				.logo {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					overflow: hidden;
					box-shadow: 0px 3px 8px 0 rgba(0, 0, 0, .16);
					margin-right: 30rpx;
					flex-shrink: 0;
				}

				.i_list {
					flex: 1;
					overflow: hidden;
					box-shadow: 0px 3px 8px 0 rgba(0, 0, 0, .16);
					padding: 20rpx 30rpx;
					border-radius: 20rpx;

					.i_item {
						padding: 10rpx 0;
						font-weight: 600;

						.font_title {
							font-size: 32rpx;
							opacity: 0.6;
							font-weight: 500;
						}
					}
				}
			}
		}
	}
</style>